<template>
  <div class="mod-api__user">
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <el-form-item>
        <el-input v-model.trim="state.dataForm.realName" placeholder="真实姓名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-select class="ml10" v-model="state.dataForm.brokerLevel" placeholder="请选择经纪人等级" value-key="" clearable filterable @change="">
          <el-option label="全部" value=""></el-option>
          <el-option label="高级" value="2"></el-option>
          <el-option label="中级" value="1"></el-option>
          <el-option label="初级" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="state.getDataList()">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="state.deleteHandle()">删除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="xczxsredr">设置分佣金额</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
      <el-table-column prop="realName" label="姓名" header-align="center" align="center"></el-table-column>
      <el-table-column label="性别" width="60" header-align="center" align="center">
        <template #default="scope">
          <span v-if="scope.row.gender === 0">男</span>
          <span v-if="scope.row.gender === 1">女</span>
        </template>
      </el-table-column>
      <el-table-column prop="idCard" width="200" label="身份证" header-align="center" align="center"></el-table-column>
      <el-table-column prop="companyId" label="入职企业" width="200" header-align="center" align="center">
        <template #default="scope">
          {{ jkxdfxsd(scope.row.companyId) }}
        </template>
      </el-table-column>
      <el-table-column prop="isJob" label="在职情况" header-align="center" align="center">
        <template #default="scope">
          <span v-if="scope.row.isJob">在职</span>
          <span v-if="scope.row.isJob === false">离职</span>
          <span v-if="scope.row.isJob === null">未入职</span>
        </template>
      </el-table-column>
      <el-table-column prop="companyNo" label="员工工号" header-align="center" align="center"></el-table-column>
      <el-table-column prop="mobile" label="手机号" width="140" header-align="center" align="center"></el-table-column>
      <el-table-column prop="balance" label="余额" header-align="center" align="center"></el-table-column>
      <el-table-column prop="balance" label="经纪人等级" header-align="center" align="center">
        <template v-slot="scope">
          {{ fdsfsdrtt(scope.row.brokerLevel) }}
        </template>
      </el-table-column>
      <el-table-column prop="balance" label="团队人数" header-align="center" align="center">
        <template v-slot="scope">
          <span class="ls sz" @click="jmxcxdf(scope.row)"> {{ scope.row.totalNum }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="260">
        <template v-slot="scope">
          <el-dropdown>
            <span class="el-dropdown-link ls sz">
              {{ fdsfsdrtt(scope.row.brokerLevel) }}
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="xcxzety(scope.row, 2)">高级经纪人</el-dropdown-item>
                <el-dropdown-item @click="xcxzety(scope.row, 1)">中级经纪人</el-dropdown-item>
                <el-dropdown-item @click="xcxzety(scope.row, 0)">初级经纪人</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-button type="primary" link @click="jczxsd(scope.row)" class="ml20">设置分佣</el-button>
          <el-button type="primary" link @click="state.deleteHandle(scope.row.id)" class="ml20">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update ref="addOrUpdateRef" @refreshDataList="state.getDataList">确定</add-or-update>
  </div>

  <el-dialog class="kkxcxretxer" v-model="visiblexrety" title="经纪人列表" :close-on-click-modal="false" :close-on-press-escape="false">
    <div class="display-flex">
      <div class="vertical-center">
        <span>手动绑定经纪人：</span>
      </div>
      <div class="">
        <!-- v-model:value="hjnnxzert" -->
        <el-select filterable v-model="hjnnxzert">
          <el-option v-for="item in optionsxert" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="vertical-center ml20">
        <el-button type="primary" @click="quexert">确认</el-button>
      </div>
    </div>
    <div class="xczxdsrtry mt20">
      <span>邀请入职成功总人数:{{ kxcxzrfr.inviteUserNum || 0 }}</span>
      <span class="ml20">邀请报名成功总人数 :{{ kxcxzrfr.registerNum || 0 }}</span>
      <span class="ml20">入职成功奖励总金额 :{{ kxcxzrfr.totalBalance || 0 }}</span>
      <span class="ml20">工时发放奖励总金额 :{{ kxcxzrfr.totalDayBalance || 0 }}</span>
    </div>
    <el-table :data="tableData" height="600" border style="width: 100%" default-expand-all row-key="id" :tree-props="{ children: 'inviteList' }">
      <el-table-column prop="realName" label="姓名" width="120" />
      <el-table-column prop="userMobile" label="联系方式" width="120" />
      <el-table-column prop="companyName" label="公司名称" width="180" />
      <el-table-column prop="userMobile" label="是否入职" width="120">
        <template v-slot="scope">
          <span v-if="scope.row.isJob">在职</span>
          <span v-if="scope.row.isJob === false">离职</span>
          <span v-if="scope.row.isJob === null">未入职</span>
        </template>
      </el-table-column>

      <el-table-column prop="balance" label="入职奖励" sortable width="110" />
      <el-table-column prop="dayBalance" label="工时奖励" sortable width="110" />
      <el-table-column prop="brokerLevel" label="经纪人等级" sortable width="120">
        <template v-slot="scope">
          {{ fdsfsdrtt(scope.row.brokerLevel) }}
        </template>
      </el-table-column>

      <el-table-column label="邀请人数" sortable width="110">
        <template v-slot="scope">
          <span>
            {{ kkmxcdf(scope.row.inviteList) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="inviteTime" label="邀请时间" sortable />
    </el-table>
  </el-dialog>

  <el-dialog v-model="visiblexretyxcr" title="分佣比例设置" :close-on-click-modal="false" :close-on-press-escape="false" class="xczxtryrdet">
    <div v-if="visiblexretyxcr">
      <div class="display-flex">
        <div class="vertical-center">高级：</div>
        <div class="flex-1">
          <el-slider v-model="jnxzca" :step="0.1" :max="kmxsd" @change="sliderChange" />
        </div>
        <div class="vertical-center ml20">
          {{ jnxzca }}
        </div>
      </div>
      <div class="display-flex mt10">
        <div class="vertical-center">中级：</div>
        <div class="flex-1">
          <el-slider v-model="hjnxsb" :step="0.1" :max="maxs" />
        </div>
        <div class="vertical-center ml20">
          {{ hjnxsb }}
        </div>
      </div>

      <div class="mt20 tr">
        <el-button type="primary" @click="bjhxdfrtx">确认</el-button>
        <el-button @click="visiblexretyxcr = false">关闭</el-button>
      </div>
    </div>
  </el-dialog>

  <el-drawer v-if="dictDataVisible" v-model="dictDataVisible" title="分佣金额" :size="800" :close-on-press-escape="false" class="rr-drawer divide-transparent">
    <DictTypeList :dictTypeId="focusDictTypeId" :ishome="true"></DictTypeList>
  </el-drawer>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, ref, toRefs } from "vue";
import AddOrUpdate from "./broker-add-or-update.vue";
import { dxget, zkjsd, transferTimeYMD, dxpost } from "@/utils/utils";
import DictTypeList from "@/views/sys/dict-data.vue";
import { ElMessageBox } from "element-plus";

const vcxvfgt = ref([]);
const visiblexrety = ref(false);
const visiblexretyxcr = ref(false);
const tableData = ref([]);
const kxcxzrfr = ref({});
const jnxzca = ref(0);
const hjnxsb = ref(0);
const jnxzcb = ref(0);
const kmxsd = ref(0);
const maxs = ref(0);
const jcxzdrf = ref();
const dictDataVisible = ref();
const focusDictTypeId = ref();
const optionsxert = ref([]);
const hjnnxzert = ref("");
const view = reactive({
  deleteIsBatch: true,
  getDataListURL: "/sys/apiUser/page?brokerLevel=0,1,2",
  getDataListIsPage: true,
  exportURL: "/api/user/export",
  deleteURL: "/api/user"
});

const state = reactive({ ...useView(view), ...toRefs(view) });

const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addOrUpdateRef.value.init(id);
};
const injxsd = async () => {
  const resd = await dxget("/sys/tmcompany/option");
  vcxvfgt.value = resd;
};
injxsd();
const jkxdfxsd = (item) => {
  try {
    return vcxvfgt.value.filter((a) => a.id == item)[0].name;
  } catch (e) {
    return "-";
  }
};
const kkmxcdf = (data) => {
  let mxcxerf = "";
  try {
    if (data.length > 0) {
      mxcxerf = data.length + "人";
    }
  } catch (e) {}
  return mxcxerf;
};
const zhuchangser = async (data, isStaff) => {
  await dxpost(
    "/api/user",
    {
      id: data.id,
      isStaff
    },
    "put"
  );
  data.isStaff = isStaff;
};
const xcxzety = async (data, dj) => {
  await dxpost(
    "/api/user",
    {
      id: data.id,
      brokerLevel: dj,
      isBroker: true
    },
    "put"
  );
  data.brokerLevel = dj;
};
const fdsfsdrtt = (data) => {
  let kmxcet = "--";
  if (data == 0) {
    kmxcet = "初级经纪人";
  }
  if (data == 1) {
    kmxcet = "中级经纪人";
  }
  if (data == 2) {
    kmxcet = "高级经纪人";
  }
  return kmxcet;
};
const jmxcxdf = async (data) => {
  state.dataListLoading = true;
  const ret = await dxget("/api/jobregist/pageList", {
    userId: data.id
  });
  console.log(ret);
  visiblexrety.value = true;
  tableData.value = ret.inviteList;
  kxcxzrfr.value = ret;
  state.dataListLoading = false;
};

const xcxrerty = async () => {
  const { list } = await zkjsd("1778415239058984961");
  kmxsd.value = parseFloat(list[0].dictValue);
};
xcxrerty();
const sliderChange = (data) => {
  jnxzca.value = data.toFixed(2);
  maxs.value = (kmxsd.value - jnxzca.value).toFixed(2);
  hjnxsb.value = 0;
};

const bjhxdfrtx = async () => {
  const ksjd = await dxpost(
    "/api/user",
    {
      id: jcxzdrf.value.id,
      brokerRate: jnxzca.value,
      brokerRateMid: hjnxsb.value
    },
    "put"
  );
  console.log(ksjd);
  if (ksjd.code == 0) {
    alert("保存成功");
    visiblexretyxcr.value = false;
    window.location.reload();
  }
};
const jczxsd = (data) => {
  visiblexretyxcr.value = true;
  jcxzdrf.value = data;
  jnxzca.value = data.brokerRate;
  hjnxsb.value = data.brokerRateMid;
  maxs.value = (kmxsd.value - jnxzca.value).toFixed(2);
};
const xczxsredr = () => {
  focusDictTypeId.value = "1778415239058984961";
  dictDataVisible.value = true;
};
const mxcxdfrt = async () => {
  const data = await dxget("/api/user/listNoInvite", {});
  data.map((a) => {
    if (a.realName) {
      optionsxert.value.push({
        label: a.realName + "--" + a.idCard,
        value: a.id
      });
    }
  });
};
mxcxdfrt();
const quexert = () => {
  ElMessageBox.confirm("确认绑定吗？绑定后无法修改哦")
    .then(async () => {
      if (!hjnnxzert.value) {
        alert("请选择用户");
        return;
      }
      const resfd = await dxpost("/api/userinvite", {
        inviteUserId: kxcxzrfr.value.id,
        userId: hjnnxzert.value,
        isPass: 2
      });
      if (resfd.msg == "重复邀请！") {
        alert("该用户已绑定为经纪人，请勿重复绑定");
        return;
      }
      alert("绑定成功！");
      // window.location.reload();
    })
    .catch(() => {
      // catch error
    });
};
</script>
<style scoped>
.xczxdsrtry {
  padding-bottom: 10px;
}
</style>
